<template>
  <div>
    <div>
      <we-button v-if="baseCode" @click="dialogFormVisibleOpen" type="primary" size="mini">
        <em class="el-icon-plus"></em> 新增
      </we-button>
      <we-button v-if="baseCode" @click="handleClick(currentRow)" type="primary" size="mini">
        <em class="el-icon-edit"></em> 修改
      </we-button>
      <we-button v-if="baseCode" @click="deleteRow"  type="primary" size="mini">
        <em class="el-icon-delete"></em> 删除
      </we-button>
      <span v-if="baseName">当前人员：【 {{baseName}} 】</span>
    </div>

    <!-- 表格 -->
    <el-table
      size="mini"
      :header-cell-style="rowClass"
      :data="tableData"
      height="116px"
      border
      highlight-current-row
      resizable
      ref="singleTable"
      @row-dblclick="handleClick"
      @current-change="handleCurrentChange"
      style="width: 100%; margin-top: 5px"
    >
      <el-table-column type="index" label="#"> </el-table-column>
      <el-table-column
        prop="contractName"
        :show-overflow-tooltip="true"
        width="150"
        label="合同名称"
      >
      </el-table-column>
      <el-table-column
        prop="contractNumber"
        :show-overflow-tooltip="true"
        width="150"
        label="合同编号"
      >
      </el-table-column>
      <el-table-column
        prop="startTime"
        :show-overflow-tooltip="true"
        width="150"
        label="合同起始日期"
      >
      </el-table-column>
      <el-table-column
        prop="contractType_dictText"
        :show-overflow-tooltip="true"
        width="150"
        label="合同类型"
      >
      </el-table-column>
      <el-table-column
        prop="probationExpirationTime"
        :show-overflow-tooltip="true"
        width="150"
        label="试用期满日期"
      >
      </el-table-column>
      <el-table-column
        prop="contractIdentityication_dictText"
        :show-overflow-tooltip="true"
        width="150"
        label="合同标识"
      >
      </el-table-column>
      <el-table-column
        prop="endTime"
        :show-overflow-tooltip="true"
        width="150"
        label="合同终止日期"
      >
      </el-table-column>
      <el-table-column
        prop="signingPeriod"
        :show-overflow-tooltip="true"
        width="150"
        label="签订年限"
      >
      </el-table-column>
      <el-table-column
        prop="signingTimes"
        :show-overflow-tooltip="true"
        width="150"
        label="签订次数"
      >
      </el-table-column>
      <el-table-column
        prop="priobationPeriod"
        :show-overflow-tooltip="true"
        width="150"
        label="试用期(月)"
      >
      </el-table-column>
      <el-table-column
        prop="period"
        :show-overflow-tooltip="true"
        width="150"
        label="合同期限(月)"
      >
      </el-table-column>
      <el-table-column
        prop="changeReason"
        :show-overflow-tooltip="true"
        width="150"
        label="合同变更原因"
      >
      </el-table-column>
      <el-table-column
        prop="changeContent"
        :show-overflow-tooltip="true"
        width="150"
        label="合同变更内容"
      >
      </el-table-column>
      <el-table-column
        prop="relieveConditions"
        :show-overflow-tooltip="true"
        width="150"
        label="合同解除条件"
      >
      </el-table-column>
      <el-table-column
        prop="terminationConditions"
        :show-overflow-tooltip="true"
        width="150"
        label="合同终止条件"
      >
      </el-table-column>
      <el-table-column
        prop="relieveReason"
        :show-overflow-tooltip="true"
        width="150"
        label="合同解除原因"
      >
      </el-table-column>
      <el-table-column
        prop="terminationReason"
        :show-overflow-tooltip="true"
        width="150"
        label="合同终止原因"
      >
      </el-table-column>
      <el-table-column
        prop="paymentComPensation"
        :show-overflow-tooltip="true"
        width="150"
        label="支付补偿金"
      >
      </el-table-column>
      <el-table-column
        prop="paymentLiquidatedDamages"
        :show-overflow-tooltip="true"
        width="150"
        label="交纳违约金"
      >
      </el-table-column>
      <!-- <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <we-button @click="handleClick(scope.row)" type="primary" size="mini"
            >详 情</we-button
          >
          <we-button type="danger" size="mini" @click="deleteSh(scope.row)" >删 除</we-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="table_tools">
     <we-Pagination :page="pagination.pageNum" :pageSize="pagination.pageSize" :total="pagination.total" @currentChange="currentChange($event)">></we-Pagination>
    </div>
    <!-- 表格 -->

    <!-- 新增弹窗 ↓↓↓↓↓↓↓ -->
    <el-dialog
      title="新增劳动合同签订情况子集"
      :visible.sync="dialogFormVisible"
      @close="handleOffDialog"
      append-to-body
    >
      <el-form :model="form" label-width="140px" size="mini" :rules="rules" ref="form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同名称">
              <el-input
                class="inputW"
                v-model="form.contractName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同编号">
              <el-input
                class="inputW"
                v-model="form.contractNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同起始日期">
              <el-date-picker
                class="inputW"
                v-model="form.startTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同类型" prop="contractType">
              <el-select
                class="inputW"
                v-model="form.contractType"
                placeholder="请选择"
                clearable
              >
                <el-option v-for="item in contractType" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试用期满日期">
              <el-date-picker
                class="inputW"
                v-model="form.probationExpirationTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同标识">
              <el-select
                class="inputW"
                v-model="form.contractIdentityication"
                placeholder="请选择"
                clearable
              >
                <el-option v-for="item in contractId" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同终止日期">
              <el-date-picker
                class="inputW"
                v-model="form.endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订年限">
              <el-input
                class="inputW"
                v-model="form.signingPeriod"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="签订次数">
              <el-input
                class="inputW"
                v-model="form.signingTimes"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="试用期(月)">
              <el-input
                class="inputW"
                v-model="form.priobationPeriod"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同期限(月)">
              <el-input
                class="inputW"
                v-model="form.period"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同变更原因">
              <el-input
                class="inputW"
                v-model="form.changeReason"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同变更内容">
              <el-input
                class="inputW"
                v-model="form.changeContent"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同解除条件">
              <el-input
                class="inputW"
                v-model="form.relieveConditions"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同终止条件">
              <el-input
                class="inputW"
                v-model="form.terminationConditions"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同解除原因">
              <el-input
                class="inputW"
                v-model="form.relieveReason"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同终止原因">
              <el-input
                class="inputW"
                v-model="form.terminationReason"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付补偿金" prop="paymentComPensation">
              <el-input
                class="inputW"
                v-model="form.paymentComPensation"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交纳违约金" prop="paymentLiquidatedDamages">
              <el-input
                class="inputW"
                v-model="form.paymentLiquidatedDamages"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <we-button size="mini" @click="handleOffDialog"
          >取 消</we-button
        >
        <we-button size="mini" type="primary" @click="addRe('form')"
          >新 增</we-button
        >
      </div>
    </el-dialog>
    <!-- 新增弹窗 ↑↑↑↑↑↑↑-->

    <!-- 编辑弹窗 ↓↓↓↓↓↓↓ -->
    <el-dialog
      title="新增劳动合同签订情况子集"
      :visible.sync="dialogVisible"
      append-to-body
    >
      <el-form :model="form" label-width="140px" size="mini" :rules="rules" ref="form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同名称">
              <el-input
                class="inputW"
                v-model="form.contractName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同编号">
              <el-input
                class="inputW"
                v-model="form.contractNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同起始日期">
              <el-date-picker
                class="inputW"
                v-model="form.startTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同类型" prop="contractType">
              <el-select
                class="inputW"
                v-model="form.contractType"
                placeholder="请选择"
                clearable
              >
                <el-option v-for="item in contractType" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试用期满日期">
              <el-date-picker
                class="inputW"
                v-model="form.probationExpirationTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同标识">
              <el-select
                class="inputW"
                v-model="form.contractIdentityication"
                placeholder="请选择"
                clearable
              >
                <el-option v-for="item in contractId" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同终止日期">
              <el-date-picker
                class="inputW"
                v-model="form.endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订年限">
              <el-input
                class="inputW"
                v-model="form.signingPeriod"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="签订次数">
              <el-input
                class="inputW"
                v-model="form.signingTimes"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="试用期(月)">
              <el-input
                class="inputW"
                v-model="form.priobationPeriod"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同期限(月)">
              <el-input
                class="inputW"
                v-model="form.period"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同变更原因">
              <el-input
                class="inputW"
                v-model="form.changeReason"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同变更内容">
              <el-input
                class="inputW"
                v-model="form.changeContent"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同解除条件">
              <el-input
                class="inputW"
                v-model="form.relieveConditions"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同终止条件">
              <el-input
                class="inputW"
                v-model="form.terminationConditions"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同解除原因">
              <el-input
                class="inputW"
                v-model="form.relieveReason"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同终止原因">
              <el-input
                class="inputW"
                v-model="form.terminationReason"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付补偿金" prop="paymentComPensation">
              <el-input
                class="inputW"
                v-model="form.paymentComPensation"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交纳违约金" prop="paymentLiquidatedDamages">
              <el-input
                class="inputW"
                v-model="form.paymentLiquidatedDamages"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <we-button size="mini" @click="dialogVisible = false"
          >取 消</we-button
        >
        <we-button size="mini" type="primary" @click="updRe('form')"
          >编 辑</we-button
        >
      </div>
    </el-dialog>
    <!-- 编辑弹窗 ↑↑↑↑↑↑↑-->
  </div>
</template>

<script>
import WeButton from '@/components/WeButton'
import WePagination from '@/components/WePagination'
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
import {bus} from "@/utils/eventBus";
export default {
  components: {
    WeButton,
    WePagination
  },

  data () {
    const moneyJuS = (rule, value, callback) => {
      const moneyJu = /^(([1-9]\d*)(\.\d{1,2})?)$|(0\.0?([1-9]\d?))$/
      if (value === '') {
        callback()
      } else if (!moneyJu.test(value)) {
        callback(new Error('请输入正确的金额'))
      } else {
        callback()
      }
    }
    return {
      selListParameter: { baseCode: '' }, // 列表查询参数
      pagination: {
        total: 10, // 总数据条数
        pageSize: 10, // 每页条数
        pageNum: 1 // 当前页
      }, // 列表分页数据
      tableData: [],
      dialogFormVisible: false,
      dialogVisible: false,
      currentRow: null,
      form: {
        contractName: '',
        contractNumber: '',
        startTime: '',
        contractType: '',
        probationExpirationTime: '',
        contractIdentityication: '',
        endTime: '',
        signingPeriod: '',
        signingTimes: '',
        priobationPeriod: '',
        period: '',
        changeReason: '',
        changeContent: '',
        relieveConditions: '',
        terminationConditions: '',
        relieveReason: '',
        terminationReason: '',
        paymentComPensation: '',
        paymentLiquidatedDamages: '',
        uuid: '',
        baseCode: '',
        sysOrgCode: '',
        createUser: '',
        uuidList:[],
      },
      rules: {
        contractType: [
          { required: true, message: '请选合同类型', trigger: 'change' }
        ],
        paymentComPensation: [{ validator: moneyJuS, trigger: 'blur' }],
        paymentLiquidatedDamages: [{ validator: moneyJuS, trigger: 'blur' }]
      }, // 表单验证
      options: [],
      value1: '',
      value: '',
      contractType: [], // 合同类型
      contractId: [], // 合同标识
      baseCode: '',
      baseName: '',
    }
  },
  watch: {
    dialogFormVisible () {
      if (this.dialogFormVisible === false) {
        if (this.$store.state.labor === true) {
          this.$store.commit('changeLabor', false)
        }
      }
    },
    dialogVisible () {
      if (this.dialogVisible === false) {
        if (this.$store.state.labor === true) {
          this.$store.commit('changeLabor', false)
        }
      }
    },
    '$store.state.baseCode'(newval) {
      this.baseCode  = newval
      this.getList ()
    },
    '$store.state.baseName'(newval) {
      this.baseName  = newval
    },
    '$store.state.labor' (newval) {
      if (newval === true) {
        if (this.$store.state.updateSubset === true) {
          this.dialogVisible = true
        } else {
          this.dialogFormVisible = true
        }
        this.$store.commit('changeUpdateSubset', false)
        this.baseCode = this.$store.state.baseCodes
        this.getContractType()
        this.getContractId()
      }
    }
  },
  methods: {
    clickSubset () {
      this.baseCode = this.$store.state.baseCode
      this.getContractType()
      this.getContractId()
      this.getList()
    },
    batchAdd(data){
      this.dialogFormVisible = true
      this.ruleForm.uuidList = data
    },
    // 查询列表
    getList () {
      let self = this
      const dataZ = this.selListParameter
      dataZ.baseCode = this.baseCode
      dataZ.size = this.pagination.pageSize
      dataZ.page = this.pagination.pageNum
      postAction('/opLaborContractSigning/opLaborContractSigningSearch', dataZ).then((result) => {
        if (!result.data.list.length && self.pagination.pageNum !== 1) {
          self.pagination.pageNum -= 1
          self.getList()
          return
        }
        self.pagination.total = result.data.total
        self.tableData = result.data.list
      }).catch(() => {})
    },

    /**
     * 新增窗打开
     */
    dialogFormVisibleOpen () {
      this.thatFormClean()
      this.dialogFormVisible = true
    },
    /**
     *新增点击
     */
    addRe (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = this.form
          data.baseCode = this.baseCode
          data.sysOrgCode = '0a590ef720f44d96ab5bebf3c7db0de3'
          data.createUser = '0a590ef720f44d96ab5bebf3c7db0de3'
          if (this.$store.state.labor === true) {
            for (let i = 0; i < this.baseCode.length; i++) {
              data.baseCode = this.baseCode[i]
              postAction('/opLaborContractSigning/add', data)
                .then((result) => {
                  if (result.code === 200) {
                    this.dialogFormVisible = false
                    bus.$emit('handleDialog')
                    this.thatMessage('操作成功', 'success')
                    this.thatFormClean()
                  } else {
                    this.thatMessage(result.msg, 'warning')
                  }
                })
                .catch(() => {
                  this.thatMessage('操作失败', 'warning')
                })
            }
          } else {
            postAction('/opLaborContractSigning/add', data)
              .then((result) => {
                if (result.code === 200) {
                  this.dialogFormVisible = false
                  bus.$emit('handleDialog')
                  this.thatMessage('操作成功', 'success')
                  this.getList()
                  this.thatFormClean()
                } else {
                  this.thatMessage(result.msg, 'warning')
                }
              })
              .catch(() => {
                this.thatMessage('操作失败', 'warning')
              })
          }
        }
      })
    },

    /**
     * 编辑窗打开
     */
    handleClick (row) {
      if(!row){
        this.$message("请选择要编辑的数据！")
        return
      }
      this.thatFormClean()
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },

    /**
     *编辑点击
     */
    updRe (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.form))
          data.updateUser = '0a590ef720f44d96ab5bebf3c7db0de3'
          postAction('/opLaborContractSigning/update', data)
            .then((result) => {
              if (result.code === 200) {
                this.dialogVisible = false
                bus.$emit('handleDialog')
                this.thatMessage('操作成功', 'success')
                this.getList()
              } else {
                this.thatMessage(result.msg, 'warning')
              }
            })
            .catch(() => {
              this.thatMessage('操作失败', 'warning')
            })
        }
      })
    },
    handleCurrentChange(val) {
        this.currentRow = val;
    },
    handleOffDialog() {
      this.dialogFormVisible = false
      bus.$emit('handleDialog')
    },
    /**
     * 删除数据111111
     */
    deleteRow (row) {
      if(!this.currentRow){
        this.$message("请选择要删除的数据！")
        return
      }
      this.$confirm('是否要删除这条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteAction('/opLaborContractSigning/delete', { uuids: [this.currentRow.uuid] }).then(
            (res) => {
              if (res.code === 200) {
                this.thatMessage('删除成功', 'success')
                this.getList()
              } else {
                this.thatMessage('操作失败', 'warning')
              }
            }
          )
        })
        .catch(() => {
          this.thatMessage('已取消删除', 'info')
        })
    },

    /**
     * 获取合同类型字典
     */
    async getContractType () {
      const result = await getAction('/opDictNew/findTreeByType?type=rs_ji')
      this.contractType = result.data
    },

    /**
     * 获取合同标识字典
     */
    async getContractId () {
      const result = await getAction('/opDictNew/findTreeByType?type=rs_xx')
      this.contractId = result.data
    },

    // 本页面弹窗
    thatMessage (message, type) {
      this.$message({
        message: message,
        type: type
      })
    },
    // 清空form
    thatFormClean () {
      this.form = {
        contractName: '',
        contractNumber: '',
        startTime: '',
        contractType: '',
        probationExpirationTime: '',
        contractIdentityication: '',
        endTime: '',
        signingPeriod: '',
        signingTimes: '',
        priobationPeriod: '',
        period: '',
        changeReason: '',
        changeContent: '',
        relieveConditions: '',
        terminationConditions: '',
        relieveReason: '',
        terminationReason: '',
        paymentComPensation: '',
        paymentLiquidatedDamages: '',
        uuid: '',
        baseCode: '',
        sysOrgCode: '',
        createUser: ''
      }
    },

    // 当前页改变
    currentChange (event) {
      this.pagination.pageNum = event
      this.getList()
    },

    handleClose () {},
    handleChange () {},
    rowClass ({ row, rowIndex }) {
      return 'background:rgba(248, 248, 249, 1);color:#000;'
    }
  }
}
</script>

<style scoped>

.table_tools {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
